<template>
    <div class="animated fadeInUp bg_fff" v-cloak>
        <ul class="flexbox flex_between">
            <li class="fs14 flex_1 tc color_666 border-tran h40 lh42"
            v-for="(item,idx) in menu"
            v-bind:class='{"top_hover":menuIndex===idx}'
            @click="menuIndex=idx"
            v-text="item"></li>
        </ul>
        <div class="swiperWrap">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="../../static/img/1.jpg">
                    </div>
                    <div class="swiper-slide">
                        <img src="../../static/img/2.jpg">
                    </div>
                    <div class="swiper-slide">
                        <img src="../../static/img/3.jpg">
                    </div>
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <ul class="flexbox line_bottom">
            <li class="flex_1 pb15 pt15">
                <p class="tc">
                    <span class="border_red color_red radius50 inline-block w50 h50 icon_hover">
                        <i class="iconfont lh48 fs24">&#xe601;</i>
                    </span>
                </p>
                <p class="fs13 tc mt5 elli2">私人FM</p>
            </li>
            <li class="flex_1 pb15 pt15">
                <p class="tc">
                    <span class="border_red color_red radius50 inline-block w50 h50 icon_hover">
                        <i class="iconfont lh48 fs24">&#xe621;</i>
                    </span>
                </p>
                <p class="fs13 tc mt5 elli2">每日歌曲推荐</p>
            </li>
            <li class="flex_1 pb15 pt15">
                <p class="tc">
                    <span class="border_red color_red radius50 inline-block w50 h50 icon_hover">
                        <i class="iconfont lh48 fs24">&#xe74c;</i>
                    </span>
                </p>
                <p class="fs13 tc mt5 elli2">云音乐热歌榜</p>
            </li>
        </ul>
        <div class="pt20 pb10">
            <p class="border-left_red pl10">
                推荐歌单
                <i class="iconfont fs18 color_aaa">&#xe60a;</i>
            </p>
        </div>
        <ul class="flexbox flex_start">
            <li class="flex_1 fs13">
                <p><img src="../../static/img/list-1.jpg" class="wp100"></p>
                <p class="pt5 pl5 elli2">有没有一首歌，让你瞬间热泪盈眶</p>
            </li>
            <li class="flex_1 ml3 mr3 fs13">
                <p><img src="../../static/img/list-2.jpg" class="wp100"></p>
                <p class="pt5 pl5 elli2">嘿，这歌里有甜蜜的味道</p>
            </li>
            <li class="flex_1 fs13">
                <p><img src="../../static/img/list-3.jpg" class="wp100"></p>
                <p class="pt5 pl5 elli2">极致天籁，一听倾心</p>
            </li>
        </ul>
        <ul class="flexbox mt20 mb30">
            <li class="flex_1 fs13">
                <p><img src="../../static/img/list-4.jpg" class="wp100"></p>
                <p class="pt5 pl5">带给你一天好心情</p>
            </li>
            <li class="flex_1 ml3 mr3 fs13">
                <p><img src="../../static/img/list-5.jpg" class="wp100"></p>
                <p class="pt5 pl5">手把手教你撩妹子</p>
            </li>
            <li class="flex_1 fs13">
                <p><img src="../../static/img/list-6.jpg" class="wp100"></p>
                <p class="pt5 pl5">极致天籁，一听倾心</p>
            </li>
        </ul>
        <div class="pt20 pb10">
            <p class="border-left_red pl10">
                独家放送
                <i class="iconfont fs18 color_aaa">&#xe60a;</i>
            </p>
        </div>
        <ul class="flexbox flex_start">
            <li class="flex_1 fs13">
                <p><img src="../../static/img/list-7.jpg" class="wp100"></p>
                <p class="pt5 pl5 elli2">李荣浩《嗯》青春版，小姐姐太酷啦！</p>
            </li>
            <li class="flex_1 ml3 mr3 fs13">
                <p><img src="../../static/img/list-8.jpg" class="wp100"></p>
                <p class="pt5 pl5 elli2">Beats网易云音乐 优选耳机限时特卖等你来！</p>
            </li>
        </ul>
        <ul class="flexbox flex_start mt20">
            <li class="flex_1 fs13">
                <p><img src="../../static/img/list-9.jpg" class="wp100"></p>
                <p class="pt5 pl5 elli2">网易云音乐最新动画榜单混剪视频出炉，有你最爱的歌吗？</p>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        name: 'app',
        data(){
            return {
                menu:["个性推荐","歌单"],
                menuIndex:0
            }
        },
        mounted:function(){
            var swiper = new Swiper('.swiper-container', {
                pagination: '.swiper-pagination',
                paginationClickable: true,
                autoplay:3000,
                loop:true
            });
        }
    }
</script>

<style scoped>
    .top_hover{
        border-bottom-color:#D43C31;
        color:#D43C31;;
    }
    .icon_hover:active{
        background-color: #D43C31;
        color:#fff;
    }
    .swiperWrap{
        height:100%;
    }

    .swiper-container {
        width: 100%;
        height: 100%;
    }
    
    .swiper-slide {
        text-align: center;
        font-size: 18px;
        background: #fff;
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center;
        background-color: #afa;
    }

    .swiper-slide img{
        width:100%;
    }
</style>